<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>control.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
     var _typeTreeName = "goog";
     var _fileTreeName = "Source";
  </script>

  <script src="static/js/doc.js">
  </script>


  <meta charset="utf8">
</head>

<body onload="grokdoc.onLoad();">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">control.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    <span class='nodesc'>No description.</span>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="http://closure-library.googlecode.com/git/closure/goog/demos/control.html">Demo</a></li>
            <li><a href="local_closure_goog_ui_control.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
            <li><a href="http://code.google.com/p/closure-library/source/browse/local/closure/goog/ui/control.js">Git</a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">/goog/ui/control.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_Control.html">
          goog.ui.Control</a><br/>
        <div class="class-details">Base class for UI controls.  Extends <code> goog.ui.Component</code> by adding
the following:
 <ul><li>a <code> goog.events.KeyHandler</code>, to simplify keyboard handling,
   <li>a pluggable <em>renderer</em> framework, to simplify the creation of
       simple controls without the need to subclass this class,
   <li>the notion of component <em>content</em>, like a text caption or DOM
       structure displayed in the component (e.g. a button label),
   <li>getter and setter for component content, as well as a getter and
       setter specifically for caption text (for convenience),
   <li>support for hiding/showing the component,
   <li>fine-grained control over supported states and state transition
       events, and
   <li>default mouse and keyboard event handling.
 </li></li></li></li></li></li></li></ul>
This class has sufficient built-in functionality for most simple UI controls.
All controls dispatch SHOW, HIDE, ENTER, LEAVE, and ACTION events on show,
hide, mouseover, mouseout, and user action, respectively.  Additional states
are also supported.  See closure/demos/control.html
for example usage.
</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>









<div class="section">
  <table class="horiz-rule">


  </table>
</div>




  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td class="deprecated">
    <a name="goog.ui.Control.decorate"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.Control.</span><span class="entryName">decorate<span class="args">(<span class="arg">element</span>)</span>
        </span>
        &#8658; <span>?</span><span class="type"><a href="class_goog_ui_Control.html">goog.ui.Control</a></span>
      </div>


     <div class="entryOverview">
       <span class="deprecatedMessage">Use <code> goog.ui.decorate</code> instead.</span>
       Takes an element, and decorates it with a <code> goog.ui.Control</code> instance
if a suitable decorator is found.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">Element to decorate.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span>?</span><span class="type"><a href="class_goog_ui_Control.html">goog.ui.Control</a></span>&nbsp;
            New control instance that decorates the element
    (null if none).
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_control.js.source.html#line125">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td class="deprecated">
    <a name="goog.ui.Control.getDecorator"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.Control.</span><span class="entryName">getDecorator<span class="args">(<span class="arg">element</span>)</span>
        </span>
        &#8658; <span>?</span><span class="type"><a href="class_goog_ui_Control.html">goog.ui.Control</a></span>
      </div>


     <div class="entryOverview">
       <span class="deprecatedMessage">Use <code> goog.ui.registry.getDecorator</code> instead.</span>
       Takes an element and returns a new instance of <code> goog.ui.Control</code>
or a subclass, suitable to decorate it (based on the element's CSS class).

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">element</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">Element to decorate.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span>?</span><span class="type"><a href="class_goog_ui_Control.html">goog.ui.Control</a></span>&nbsp;
            New control instance to decorate the element
    (null if none).
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_control.js.source.html#line112">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>






  <td>
    <a name="goog.ui.Control.isMouseEventWithinElement_"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.Control.</span><span class="entryName">isMouseEventWithinElement_<span class="args">(<span class="arg">e</span>,&nbsp;<span class="arg">elem</span>)</span>
        </span>
        &#8658; <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>
      </div>


     <div class="entryOverview">
       Checks if a mouse event (mouseover or mouseout) occured below an element.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">e</span>
        : <span class="type"><a href="class_goog_events_BrowserEvent.html">goog.events.BrowserEvent</a></span>
        <div class="entryOverview">Mouse event (should be mouseover or
    mouseout).</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">elem</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/DOM/Element">Element</a></span>
        <div class="entryOverview">The ancestor element.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">boolean</a></span>&nbsp;
            Whether the event has a relatedTarget (the element the
    mouse is coming from) and it's a descendent of elem.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_control.js.source.html#line1198">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td class="deprecated">
    <a name="goog.ui.Control.registerDecorator"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.Control.</span><span class="entryName">registerDecorator<span class="args">(<span class="arg">className</span>,&nbsp;<span class="arg">decoratorFunction</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       <span class="deprecatedMessage">Use <code> goog.ui.registry.setDecoratorByClassName</code> instead.</span>
       Maps a CSS class name to a function that returns a new instance of
<code> goog.ui.Control</code> or a subclass thereof, suitable to decorate
an element that has the specified CSS class.  UI components that extend
<code> goog.ui.Control</code> and want <code> goog.ui.Container</code>s to be able
to discover and decorate elements using them should register a factory
function via this API.

     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">className</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span>
        <div class="entryOverview">CSS class name.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">decoratorFunction</span>
        : <span class="type"><a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Function">Function</a></span>
        <div class="entryOverview">Function that takes no arguments and
    returns a new instance of a control to decorate an element with the
    given class.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_control.js.source.html#line101">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>






  <h2>Global Variables</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>





  <a name="function%83"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryName">function%83</span>
        : 
     </div>


     <div class="entryOverview">
       <span class='nodesc'>No description.</span>
     </div>

  </td>


  <td class="view-code">
     <a href="local_closure_goog_ui_control.js.source.html#line1385">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>
      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory ui</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="" current="/goog/ui/control.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
